import {useState} from 'react'
import logo from './logo.svg'
import './App.css'
import './assets/css/style.css'
import dun from './assets/img/dun.jpg'
import p1k from './assets/img/1000.jpg'
import ke from './assets/img/ke.jpg'
import keli from './assets/img/keli.jpg'

/*SPA Single Page Application  单页面应用 */
function App() {
    const [count, setCount] = useState(0)

    const add = (e: number) => {
        setCount(prev => prev + Math.round(e))
    }
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>Hello Vite + React!</p>
                <img src="http://img.duoziwang.com/2019/04/07011152913940.jpg" alt=""/>
                <div>
                    <img className='img' src={dun} onClick={() => add(Math.random() * 10)}/>
                    <img className='img' src={p1k} onClick={() => add(Math.random() * 10)}/>
                    <img className='img' src={ke} onClick={() => add(Math.random() * 10)}/>
                    <img className='img' src={keli} onClick={() => add(Math.random() * 10)}/>
                </div>
                <p>
                    <button type="button" onClick={() => setCount((count) => count + 1)}>
                        count is: {count}
                    </button>
                </p>
                <button>一键安装</button>
                <p>
                    Edit <code>App.tsx</code> and save to test HMR updates.
                </p>
                <p>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
                    {' | '}
                    <a
                        className="App-link"
                        href="https://vitejs.dev/guide/features.html"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Vite Docs
                    </a>
                </p>
            </header>
        </div>
    )
}

export default App
